body {
  background-color: #000;
  overflow: hidden;
}
.container {
  position: absolute;
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.box {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #000000;
  box-shadow: inset 0 25px 0 25px #ffffff;
  mix-blend-mode: difference;
}
.box:nth-child(1) {
  transform: rotate(60deg) translate(100px);
  animation: 'move1' 10s linear infinite;
}
@keyframes 'move1' {
  100% {
    transform: rotate(calc(-1020deg)) translate(100px);
  }
}
.box:nth-child(2) {
  transform: rotate(120deg) translate(100px);
  animation: 'move2' 10s linear infinite;
}
@keyframes 'move2' {
  100% {
    transform: rotate(calc(-960deg)) translate(100px);
  }
}
.box:nth-child(3) {
  transform: rotate(180deg) translate(100px);
  animation: 'move3' 10s linear infinite;
}
@keyframes 'move3' {
  100% {
    transform: rotate(calc(-900deg)) translate(100px);
  }
}
.box:nth-child(4) {
  transform: rotate(240deg) translate(100px);
  animation: 'move4' 10s linear infinite;
}
@keyframes 'move4' {
  100% {
    transform: rotate(calc(-840deg)) translate(100px);
  }
}
.box:nth-child(5) {
  transform: rotate(300deg) translate(100px);
  animation: 'move5' 10s linear infinite;
}
@keyframes 'move5' {
  100% {
    transform: rotate(calc(-780deg)) translate(100px);
  }
}
.box:nth-child(6) {
  transform: rotate(360deg) translate(100px);
  animation: 'move6' 10s linear infinite;
}
@keyframes 'move6' {
  100% {
    transform: rotate(calc(-720deg)) translate(100px);
  }
}
